<template name="ChooseButton">
		<view class="choose_button" @click="clickButton()" :class="{active: isActive}">{{listItem.name}}</view>
</template>

<script>
	export default {
		name: "ChooseButton",
		data() {
			return {
				isActive: false
			};
		},
		props: ["listItem", "click", "chooseCount", "faclickItem"],
		mounted() {

		},
		methods: {
			clickButton: function() {
				this.$emit("click", this.listItem)
			}
		},
		watch: {
			chooseCount: {
				deep: true,
				handler(newArr, oldArr) {
					let arr = [...newArr]
					if (arr.some(item => item.id  === this.listItem.id)) {
						this.isActive = true
					}else {
						this.isActive = false
					}
				}
			}
		}
	}
</script>

<style>
	.choose_button {
		height: 80rpx;
		color: #222222;
		line-height: 80rpx;
		padding: 10rpx 25rpx;
		background-color: #F7F7F7;
		border-radius: 50rpx;
		text-align: center;
		font-size: 14px;
	}
	.active {
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
		color: #FFFFFF;
	}
</style>
